<template>
	<div class="detail-user">
		<div class="d-u-l">
			<div class="avatar-box">
				<img class="avatar-img" :src="detailAvatar" />
			</div>
			<div class="user-box">
				<p class="user-p">
					{{detailUser}}
				</p>
				<p class="fs-p">
					{{detailFans}}
				</p>
			</div>
		</div>
		<div class="d-u-r">
			<button class="focus">
				关注
			</button>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'detail-user',
		props: {
			detailAvatar: String,
			detailUser: String,
			detailFans: String
		}
	}
</script>

<style lang="stylus" scoped>
	@import '~stylus/glo.styl'
	.detail-user
		padding:10px 0
		background:#fff
		display:flex
		flex-direction:row
		.d-u-l
			width:50%
			height:120px
			display:flex
			flex-direction:row
			.avatar-box
				width:80px
				height:80px
				margin-top:18px
				margin-left:22px
				border-radius:50%
				overflow:hidden
				.avatar-img
					width:100%
			.user-box
				width:248px
				height:82px
				margin-top:18px
				margin-left:18px
				.user-p
					font-size:30px
					font-weight:bold
					color:#202020
					width:242px
					white-space: nowrap
					overflow: hidden
					text-overflow:ellipsis
					margin-top:10px
				.fs-p
					font-size:24px
					color:#373737
					width:242px
					white-space: nowrap
					overflow: hidden
					text-overflow:ellipsis
					margin-top:12px
		.d-u-r
			width:50%
			height:120px
			.focus
				padding:8px 26px
				background:$public_thems_color
				color:#fff
				border:none
				border-radius:6px
				font-size:30px
				float:right
				margin-right:22px
				margin-top:30px
</style>
